<script setup lang="ts">
  import { ref } from 'vue'
  import useService from './userService'
  import { ElMessage } from 'element-plus'
  import { WarningFilled } from '@element-plus/icons-vue'
  import CheckCost from '@/components/pages/order/detail/ServiceFee/ApplyOrCheckFeeModal/index.vue'
  import CheckParts from '@/views/order/parts/components/CheckParts.vue'
  import CheckStatementOrder from '@/components/pages/order/detail/CheckSettlementOrder/CheckStatementOrder.vue'
  import HPlainButton from '@/components/common/button/HPlainButton.vue'
  import HLink from '@/components/common/link/HLink.vue'
  import HButton from '@/components/common/button/HButton.vue'
  import CheckCancelOrder from '@/components/pages/order/detail/CheckCancelOrder/CheckCancelOrder.vue'
  import HModal from '@/components/common/Modal/HModal.vue'
  import CheckUpdateNetwork from '@/components/pages/order/detail/CheckUpdateNetwork/CheckUpdateNetwork.vue'

  const props = defineProps({
    orderId: {
      type: String,
      required: true,
    },
    orderNo: {
      type: String,
      required: true,
    },
    network: {
      type: String,
      required: true,
    },
    networkId: {
      type: String,
      required: true,
    },
    emp: String,
  })

  // 审核结单弹窗显示状态
  const checkStatementOrderModalVisible = ref(false)

  const emits = defineEmits<{
    (e: 'update'): void
    (e: 'updateCostList'): void
    (e: 'updatePartList'): void
  }>()

  // 弹窗状态
  const visible = ref(false)

  // 使用服务
  const { get, loading, pendingPreviewEventList } = useService

  /**
   * 显示弹窗事件
   */
  const onShowModal = () => {
    if (pendingPreviewEventList.value.length <= 0) {
      ElMessage({
        type: 'warning',
        message: '暂无待处理事项',
      })
      return false
    }
    visible.value = true
  }

  /**
   * 获取数据方法
   */
  const getPendingTasks = async () => {
    await get(props.orderId)
    if (pendingPreviewEventList.value.length <= 0) {
      visible.value = false
    }
  }

  // 审核配件弹窗显示状态
  const checkPartsModalVisible = ref(false)

  // 配件id
  const partsId = ref('')

  /**
   * 显示或隐藏配件审核弹窗
   * @param {boolean} visible - 弹窗的显示状态
   * @param {string} id 配件id
   */
  const onShowOrHideCheckPartModal = (visible: boolean, id = '') => {
    checkPartsModalVisible.value = visible
    partsId.value = id
  }

  // 取消工单弹窗显示状态
  const orderCancelModalVisible = ref(false)

  // 改派服务商弹窗显示状态
  const updateNetworkModalVisible = ref(false)

  /**
   * 去审核按钮点击事件
   * @param type - 3.结单申请 4.取消工单申请 5.改派服务商申请 6.工单挂起申请
   */
  const handleToCheckClick = (type: number) => {
    if (type === 3) {
      checkStatementOrderModalVisible.value = true
    }
    if (type === 4) {
      orderCancelModalVisible.value = true
    }
    if (type === 5) {
      updateNetworkModalVisible.value = true
    }
  }

  /**
   * 更新方法
   */
  const onUpdate = () => {
    getPendingTasks()
    emits('update')
  }

  /**
   * 审核了配件后才会触发
   */
  const onCheckPartUpdate = () => {
    getPendingTasks()
    emits('updatePartList')
    visible.value = false
  }

  /**
   * 审核了费用后才会触发
   */
  const onServiceFeeUpdate = () => {
    getPendingTasks()
    emits('updateCostList')
    visible.value = false
  }

  defineExpose({
    getPendingTasks,
  })
</script>

<template>
  <div>
    <HPlainButton type="warning" @click="onShowModal" :loading="loading">
      待处理{{ pendingPreviewEventList.length ? `(${pendingPreviewEventList.length})` : '' }}
    </HPlainButton>
    <HModal v-model="visible" size="small">
      <template #header>
        <div style="display: flex; align-items: center; font-size: 14px; gap: 5px">
          <el-icon color="#f56c6c" size="18px">
            <WarningFilled />
          </el-icon>
          <span>{{ `此工单有${pendingPreviewEventList.length}条事项待处理` }}</span>
        </div>
      </template>
      <div
        style="display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow: auto"
      >
        <div
          v-for="event in pendingPreviewEventList"
          :key="event.id"
          style="display: flex; justify-content: space-between; align-items: center"
        >
          <div style="display: flex; align-items: center; gap: 5px">
            <span>
              <template v-if="event.type === 1">服务费用</template>
              <template v-else-if="event.type === 2">工单配件</template>
              <template v-else-if="event.type === 3">结单申请</template>
              <template v-else-if="event.type === 4">取消工单申请</template>
              <template v-else-if="event.type === 5">改派服务商申请</template>
              <template v-else>工单挂起申请</template>
            </span>
            <CheckCost
              v-if="event.type === 1"
              :fee-id="event.id"
              :fee-no="event.code"
              :work-no="props.orderNo"
              @update-list="onServiceFeeUpdate"
            >
              <HLink>
                <span style="width: 140px; text-align: left; font-size: 14px">
                  {{ event.code }}
                </span>
              </HLink>
            </CheckCost>
            <template v-else-if="event.type === 2">
              <HLink @click="onShowOrHideCheckPartModal(true, event.id)">
                <span style="width: 140px; text-align: left; font-size: 14px">
                  {{ event.code }}
                </span>
              </HLink>
            </template>
            <HLink v-else @click="handleToCheckClick(event.type)">
              <span style="width: 140px; text-align: left; font-size: 14px"> 去审核 </span>
            </HLink>
            <span v-if="[1, 2].includes(event.type)">待审核</span>
          </div>
          <div v-if="event.applyTime"> 申请时间：{{ event.applyTime }} </div>
        </div>
      </div>
      <template #footerRight>
        <HButton isModal @click="visible = false">关闭</HButton>
      </template>
    </HModal>

    <!-- 审核配件弹窗 -->
    <CheckParts
      :workId="props.orderId"
      :checkDialog="checkPartsModalVisible"
      :partsId="partsId"
      @assign-dialog="onShowOrHideCheckPartModal(false)"
      @update-list="onCheckPartUpdate"
    />

    <!-- 审核结单弹窗 -->
    <CheckStatementOrder
      :word-no="props.orderNo"
      :word-id="props.orderId"
      v-model="checkStatementOrderModalVisible"
      @update="onUpdate"
    />

    <!-- 审核改派服务商弹窗 -->
    <CheckUpdateNetwork
      :network="props.network"
      :network-id="props.networkId"
      :order-id="props.orderId"
      @update="onUpdate"
      v-model="updateNetworkModalVisible"
    />

    <!-- 审核取消工单弹窗 -->
    <CheckCancelOrder
      :order-id="props.orderId"
      v-model="orderCancelModalVisible"
      @updated="onUpdate"
    />
  </div>
</template>
